<template>
    <div class="adbConfig">
        <div class="filter-container" style="margin-bottom: 16px">
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate()">
                添加adb配置
            </el-button>
        </div>

        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            prop="provider_name"
            label="Location"
            width="180">
            </el-table-column>
            <el-table-column
            prop="host"
            label="host"
            width="180">
            </el-table-column>
            <el-table-column
            prop="port"
            label="port"
            width="180">
            </el-table-column>
            <el-table-column
            prop="remarks"
            label="备注">
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="{row, $index}">
                <el-button type="text" @click="handleDelete(row, $index)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="dialogPvVisible" title="create adb config">
            <el-form :model="item" status-icon :rules="rules" ref="myForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="Location" prop="provider_name">
                    <el-input v-model.number="item.provider_name"></el-input>
                </el-form-item>
                <el-form-item label="Host" prop="host">
                    <el-input type="text" v-model.number="item.host" placeholder="必须要有@开头 如:@192.168.5.241"></el-input>
                </el-form-item>
                <el-form-item label="Port" prop="port">
                    <el-input type="number" v-model.number="item.port"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model.number="item.remarks"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="create()">提交</el-button>
                    <el-button @click="dialogPvVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import monkey from '@/api/monkey.js';

export default {
  name: "AdbConfig",
  data() {
    return {
        tableData: null,
        item: {
            provider_name: '',
            host: '',
            port: 5037,
            remarks: ''
        },
        dialogPvVisible: false,
        rules: {
            provider_name: [{ required: true, message: '必须填写Location', trigger: 'blur' }],
            host: [{ required: true, message: '必须填写host', trigger: 'blur' }],
            port: [{ required: true, message: '必须填写port', trigger: 'blur' }]
        },
    }
  },
  created() {
    this.getList()
  },
  methods: {
      handleCreate() {
          this.dialogPvVisible = true
      },
      create() {
          console.log(this.item)
          monkey.addAdbConfig(this.item).then(res => {
              this.$message.success('操作成功')
              this.dialogPvVisible = false
              this.getList()
          })
      },
        handleDelete(row, index) {
            monkey.delAdbConfig(row).then(res => {
                this.$notify({
                    title: 'Success',
                    message: 'Delete Successfully',
                    type: 'success',
                    duration: 2000
                })
                this.tableData.splice(index, 1)
            })
        },
      getList() {
          monkey.getAddConfig().then(res => {
              this.tableData = res.data.data
          })
      }
  }
}
</script>